﻿<Infrastructure:VisualStateAwarePage x:Class="AdventureWorks.Shopper.Views.OrderConfirmationPage"
                                     x:Uid="Page"
                                     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                                     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                                     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                                     xmlns:Views="using:AdventureWorks.Shopper.Views"
                                     xmlns:Infrastructure="using:Microsoft.Practices.Prism.StoreApps"
                                     mc:Ignorable="d"
                                     Infrastructure:ViewModelLocator.AutoWireViewModel="true">
    <Page.TopAppBar>
        <AppBar Style="{StaticResource AppBarStyle}"
                x:Uid="TopAppBar">
            <Views:TopAppBarUserControl />
        </AppBar>
    </Page.TopAppBar>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid x:Name="MainGrid" Style="{StaticResource LayoutRootStyle}">
        <Grid.RowDefinitions>
            <RowDefinition Height="140" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="120" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <TextBlock x:Uid="OrderConfirmationTitle"
                   x:Name="pageTitle"
                   Text="Order Confirmation"
                   Grid.Column="1"
                   Style="{StaticResource PageHeaderTextStyle}" />
        <Grid Grid.Row="1" Grid.Column="1">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <TextBlock x:Name="OrderConfirmationContent"
                       x:Uid="OrderConfirmationContent"
                       VerticalAlignment="Bottom"
                       Text="{Binding OrderConfirmationContent}"
                       Style="{StaticResource BasicTextStyle}" />
            <Button x:Name="ContinueShoppingButton"
                    x:Uid="ContinueShoppingButton"
                    Content="Continue Shopping"
                    Grid.Row="1"
                    Command="{Binding ContinueShoppingCommand}"
                    Width="300"
                    Margin="0,80,0,0"
                    VerticalAlignment="Top"
                    Background="{StaticResource AWShopperAccentBrush}" />

        </Grid>
        <VisualStateManager.VisualStateGroups>
            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="DefaultLayout" />
                <VisualState x:Name="PortraitLayout" >
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Grid.ColumnDefinitions[0].Width"
                                                       Storyboard.TargetName="MainGrid">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>40</DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!-- The title has different style when in minimal layout -->
                <VisualState x:Name="MinimalLayout">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource MinimalPageHeaderTextStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Grid.ColumnDefinitions[0].Width"
                                                       Storyboard.TargetName="MainGrid">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>20</DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Infrastructure:VisualStateAwarePage>
